<template>
  <div class="home">
    <preview-big-image
      url="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    />
    <simple-table
      :columns="columnsList"
      :data="tableData"
      stripe
      border
      :row-class-name="tableRowClassName"
      height="360"
      bottomOffset="50"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pagination="{
        height: 50,
        pageSize: 10,
        layout: 'prev, pager, next'
      }"
    >
      <template #Name="scope">{{ scope.row.name }}</template>
      <template #header>
        <el-tabs>
          <el-tab-pane label="用户管理" name="first"></el-tab-pane>
          <el-tab-pane label="配置管理" name="second"></el-tab-pane>
          <el-tab-pane label="角色管理" name="third"></el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
        </el-tabs>
      </template>
    </simple-table>
  </div>
</template>

<script>
import PreviewBigImage from "preview-big-image-vue2"
import 'preview-big-image-vue2/preview-big-image-vue2.css'
export default {
  name: "App",
  components: {
    PreviewBigImage
  },
  data() {
    return {
      columnsList: [
        {
          type: "selection",
          showOverflowTooltip: true
        },
        {
          type: "index",
          label: "序号",
          indexMethod: null,
          width: "80",
          fixed: true
        },
        {
          label: "Date",
          prop: "date",
          sortable: true,
          required: true
        },
        {
          label: "Name",
          slotName: "Name",
          required: true
        },
        {
          label: "Address",
          // width:1200,
          render: (h, param) => {
            const elem = (
              <div>
                <el-button>{param.row.name}</el-button>
              </div>
            )
            return elem
          }
        },
        {
          label: "operate",
          render: (h, param) => {
            const delBtn = h("button", {
              class: "operate-btn",
              domProps: {
                innerHTML: "删除"
              },
              on: {
                click: () => {
                  console.log("点击", param)
                }
              }
            })
            return h("div", [delBtn])
          }
        },
        {
          label: "computedName",
          prop: "name",
          formatter: (row) => {
            return row.name + row.date
          }
        }
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        }
        // {
        //   date: "2016-05-01",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-03",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-02",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-04",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-01",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-03",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-02",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-04",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-01",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-03",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-02",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-04",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // },
        // {
        //   date: "2016-05-01",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles"
        // }
      ]
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 2) {
        return "warning-row"
      } else if (rowIndex === 4) {
        return "success-row"
      }
      return ""
    },
    handleSelectionChange(list) {
      console.log("list---", list)
    },
    handleSizeChange(page) {
      console.log("page", page)
    },
    handleCurrentChange(val) {
      console.log("val", val)
    }
  }
}
</script>

<style scoped>
/* .home {
  width: 100vw;
  height: 100vh;
} */
/* >>> .el-table .warning-row {
  background: oldlace;
}

>>> .el-table .success-row {
  background: #f0f9eb;
} */
</style>
